<template>
  <div class="recommend">
    <div class="title">
      <h2>{{ block?.uiElement?.subTitle?.title }}</h2>
    </div>
    <div class="content">
      <ul class="list" :style="{ width: `${width}px`}">
        <li v-for="creative in creatives" :key="creative.creativeId">
          <van-image
            width="100"
            height="100"
            :src="creative.resource.mlogExtVO.song.coverUrl"
          />
          <div class="dec">{{creative.resource.mlogBaseData.text}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent,inject } from 'vue'
import { alldatakey } from '../key'

const usePlaylistRcmd = (alldata:any)=>{
  const block = computed<any>(()=>{
    if(!alldata.data) return null
    return alldata.data.blocks.find((block: any) => block.blockCode === 'HOMEPAGE_MUSIC_MLOG')
  })
  const creatives = computed<any[]>(()=>{
    if(!block.value) return []
    return block.value.extInfo
  })
  const width = computed(()=>{
    const len = creatives.value.length
    if(len===0) return 0
    return len * 100 + (len-1) * 10 + 30
  })
  return {
    block,
    width,
    creatives
  }
}

export default defineComponent({
  name: 'PlaylistRcmd',
  setup(){
    const alldata = inject(alldatakey)
    return {
      ...usePlaylistRcmd(alldata)
    }
  },
})
</script>

<style lang="scss" scoped>
@mixin text-ellipsis($line: 2) {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
.recommend{
  .title{
    padding: 0 15px;
    h2{
      font-size: 14px;
    }
  }
  .content{
    margin-top: 10px;
    font-size: 12px;
    overflow: auto;
    .list{
      display: flex;
      padding: 0 15px;
      color: #333;
      li{
        display: inline-block;
        width: 100px;
        .dec{
          @include text-ellipsis;
        }
        &+li{
          margin-left: 10px;
        }
      }
      
    }
  }
  
}
</style>